<template>
    <view class="book-item" @tap="handleClick">
        <view class="book-cover">
            <image class="cover-image" :src="book.coverImageUrl || defaultCover" mode="aspectFill" />
        </view>
        <view class="book-info">
            <view class="book-main">
                <text class="book-title">{{ book.title }}</text>
                <text class="book-date">{{ formatDate(book.createTime) }}</text>
            </view>
            <view class="book-stats">
                <view class="stats-item">
                    <text class="stats-value">¥{{ formatAmount(book.totalAmount) }}</text>
                    <text class="stats-label">收礼总额</text>
                </view>
                <view class="stats-item">
                    <text class="stats-value">{{ book.guestCount }}</text>
                    <text class="stats-label">宾客数</text>
                </view>
            </view>
        </view>
        <view class="book-more book-more-icon" @tap.stop="toggleDropdown">
            <text class="more-icon bigfont big-gengduo"></text>
        </view>

        <!-- 内置下拉菜单 -->
        <view v-if="showDropdown" class="dropdown-menu" :style="{
            top: `${moreButtonRect.bottom}px`,
            right: `${windowWidth - moreButtonRect.right}px`
        }">
            <view class="dropdown-item" @tap.stop="handleShare">
                <text class="dropdown-icon bigfont big-fenxiang"></text>
                <text>分享</text>
            </view>
            <view class="dropdown-item" @tap.stop="handleEdit">
                <text class="dropdown-icon bigfont big-bianji"></text>
                <text>编辑</text>
            </view>
            <view class="dropdown-item delete" @tap.stop="handleDelete">
                <text class="dropdown-icon bigfont big-shanchu"></text>
                <text>删除</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineEmits, defineProps, ref } from 'vue';

const props = defineProps({
    book: {
        type: Object,
        required: true
    }
});

const emit = defineEmits(['click', 'share', 'edit', 'delete']);

const defaultCover = '/static/images/default-cover.png';
const showDropdown = ref(false);
const moreButtonRect = ref({ top: 0, bottom: 0, right: 0 });
const windowWidth = ref(0);

const handleClick = () => {
    emit('click', props.book);
};

const toggleDropdown = () => {
    // 获取更多按钮的位置
    uni.createSelectorQuery()
        .select('.book-more-icon')
        .boundingClientRect((rect) => {
            if (rect) {
                const systemInfo = uni.getSystemInfoSync();
                moreButtonRect.value = rect;
                windowWidth.value = systemInfo.windowWidth;

                // 切换下拉菜单显示状态
                showDropdown.value = !showDropdown.value;

                console.log('Dropdown Position', {
                    rectTop: rect.top,
                    rectBottom: rect.bottom,
                    rectRight: rect.right,
                    windowWidth: systemInfo.windowWidth
                });
            }
        })
        .exec();
};

const handleShare = () => {
    emit('share', props.book);
    showDropdown.value = false;
};

const handleEdit = () => {
    emit('edit', props.book);
    showDropdown.value = false;
};

const handleDelete = () => {
    emit('delete', props.book);
    showDropdown.value = false;
};

const formatDate = (date) => {
    if (!date) return '';
    const d = new Date(date);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

const formatAmount = (amount) => {
    if (!amount) return '0.00';
    return amount.toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
};
</script>

<style>
.book-item {
    background: var(--theme-card);
    border-radius: 24rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
    display: flex;
    gap: 24rpx;
    position: relative;
    border: 2rpx solid var(--theme-primary-border);
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.book-item:active {
    transform: scale(0.98);
    opacity: 0.9;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
}

.book-cover {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--theme-background);
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.book-main {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.book-title {
    font-size: 32rpx;
    font-weight: 600;
    color: var(--theme-text);
    line-height: 1.4;
}

.book-date {
    font-size: 24rpx;
    color: var(--theme-text-secondary);
    margin-top: 4rpx;
}

.book-stats {
    display: flex;
    gap: 48rpx;
    margin-top: 16rpx;
}

.stats-item {
    display: flex;
    flex-direction: column;
    gap: 4rpx;
}

.stats-value {
    font-size: 32rpx;
    color: var(--theme-text);
    font-weight: 600;
    font-family: 'DIN Alternate', Arial, sans-serif;
}

.stats-label {
    font-size: 24rpx;
    color: var(--theme-text-secondary);
}

.book-more {
    position: absolute;
    top: 32rpx;
    right: 24rpx;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.more-icon {
    font-size: 40rpx;
    color: var(--theme-text-light);
    padding: 20rpx;
    transition: all 0.2s ease;
}

.book-more:active .more-icon {
    opacity: 0.7;
    transform: scale(0.95);
}

/* 暗黑模式适配 */
.dark-mode .book-item {
    background: var(--theme-card);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
}

.dark-mode .book-title {
    color: #FFFFFF;
}

.dark-mode .book-date {
    color: #888888;
}

.dark-mode .stats-value {
    color: #FFFFFF;
}

.dark-mode .stats-label {
    color: #888888;
}

.dark-mode .more-icon {
    color: #666666;
}

/* 下拉菜单样式 */
.dropdown-menu {
    position: fixed;
    background: var(--theme-card);
    border-radius: 16rpx;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.12);
    padding: 12rpx;
    z-index: 1000;
    min-width: 240rpx;
    border: 2rpx solid var(--theme-primary-border);
    transform-origin: bottom right;
    transform: translateY(-100%);
}

.dropdown-menu::before,
.dropdown-menu::after {
    content: '';
    position: absolute;
    right: 24rpx;
    border-style: solid;
}

.dropdown-menu::before {
    bottom: -18rpx;
    border-width: 18rpx 18rpx 0 18rpx;
    border-color: var(--theme-primary-border) transparent transparent transparent;
}

.dropdown-menu::after {
    bottom: -16rpx;
    border-width: 16rpx 16rpx 0 16rpx;
    border-color: var(--theme-card) transparent transparent transparent;
    z-index: 1;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 16rpx;
    padding: 24rpx;
    font-size: 28rpx;
    color: var(--theme-text);
    transition: all 0.2s ease;
    border-radius: 8rpx;
}

.dropdown-item:active {
    background: var(--theme-primary-light);
}

.dropdown-icon {
    font-size: 36rpx;
    color: var(--theme-text);
}

.dropdown-item.delete {
    color: #FF4D4F;
}

.dropdown-item.delete .dropdown-icon {
    color: #FF4D4F;
}

.dropdown-item.delete:active {
    background: rgba(255, 77, 79, 0.1);
}
</style>
